<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="{{ url_for('static', filename = 'favicon.ico') }}">
  <title>alwaysAI Video Streamer</title>

  <!-- Socket IO
  ================================================== -->
  <script type="text/javascript"
          src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js">
  </script>

  <!-- Bootstrap CSS
  ================================================== -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
  <!-- Custom styles
  ================================================== -->
  <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
  <style>
    body {
      background-color: #f1f2f3;
    }

    .container {
      max-width: 1024px;
    }

    .navbar-light .navbar-nav .nav-link,
    .navbar-light .navbar-nav .nav-link:hover {
      font-family: Karla;
      font-size: 14px;
      color: #000000;
    }

    .navbar-brand img {
      width: 120px
    }

    .dash-sub-title h1 {
      font-size: 16px;
      font-weight: bold;
      margin: 24px 0 8px 0;
    }

    .dash-sub-title h2 {
      font-size: 14px;
      margin: 8px 0 8px 0;
    }

    .card {
      height: 480px;
    }

    .card-scroller {
      overflow: scroll;
      height: 420px;
    }

    .stop-button {
      opacity: 1;
      background: url() no-repeat;
      cursor: pointer;
      border: none;
      width: 24px;
      height: 24px;
      float: right;
    }

    .stop-button:hover {
      opacity: 0.75;
    }

    h5 {
      border-bottom: solid 1px #d2d2d2;
    }

    ::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 7px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: rgba(0, 0, 0, .5);
      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }

    .alwaysai-logos-svg-horizontal-logo-red-black {
      width: 121px;
      height: 33px;
      background-image: url();
}
  </style>
</head>

<body class="tos-bg">

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="http://alwaysai.co/" target="_blank"><div class="alwaysai-logos-svg-horizontal-logo-red-black"></div>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
      aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <span class="navbar-nav mr-auto"></span>

      <ul class="navbar-nav ">

        <li class="nav-item">
          <a class="nav-link" href="https://alwaysai.co/docs/" target="_blank">Documentation</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://alwaysai.co/support" target="_blank">Support</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container" min-width= "1024px" width="100%">

    <div class="dash-sub-title">
      <h1>alwaysAI Video Streamer</h1>
    </div>

    <div class="card-deck">

      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Output</h5>
          <div class="card-scroller">
            <p id="streamer-text"></p>
          </div>
        </div>
      </div>

      <div style="width: 70%">
        <img id="streamer-image" src="">
      </div>

    </div>

</div>
</body>
</html>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    const image_elem = document.getElementById("streamer-image");
    const text_elem = document.getElementById("streamer-text");

    var socket = io.connect('http://' + document.domain + ':' + location.port + '/web', {
      reconnection: false
    });

    socket.on('connect', () => {
      console.log('Connected');
    });

    socket.on('disconnect', () => {
      console.log('Disconnected');
    });

    socket.on('connect_error', (error) => {
      console.log('Connect error! ' + error);
    });

    socket.on('connect_timeout', (error) => {
      console.log('Connect timeout! ' + error);
    });

    socket.on('error', (error) => {
      console.log('Error! ' + error);
    });

    // Update image and text data based on incoming data messages
    socket.on('server2web', (msg) => {
      image_elem.src = msg.image;
      text_elem.innerHTML = msg.text;
    });
  });
</script>
